<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
var i=1,gentry=null,w=null;
var hl=null,le=null,de=null,ie=null;
var unv=true;
// H5 plus事件处理
function plusReady(){
	// 获取摄像头目录对象
	plus.io.resolveLocalFileSystemURL( "_doc/", function ( entry ) {
		entry.getDirectory( "camera", {create:true}, function ( dir ) {
			gentry = dir;
			updateHistory();
		}, function ( e ) {
			outSet( "Get directory \"camera\" failed: "+e.message );
		} );
	}, function ( e ) {
		outSet( "Resolve \"_doc/\" failed: "+e.message );
	} );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 监听DOMContentLoaded事件
document.addEventListener("DOMContentLoaded",function(){
	// 获取DOM元素对象
	hl=document.getElementById("history");
	le=document.getElementById("empty");
	de=document.getElementById("display");
	if(ie=document.getElementById("index")){
		ie.onchange=indexChanged;
	}
	// 判断是否支持video标签
	unv=!document.createElement('video').canPlayType;
},false );
function changeIndex() {
	outSet( "选择摄像头：" );
	ie.focus();
}
function indexChanged() {
	de.innerText = ie.options[ie.selectedIndex].innerText;
	i = parseInt( ie.value );
	outLine( de.innerText );
}
// 拍照
function getImage() {
	outSet( "开始拍照：" );
	var cmr = plus.camera.getCamera();
	cmr.captureImage( function ( p ) {
		outLine( "成功："+p );
		plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
			createItem( entry );
		}, function ( e ) {
			outLine( "读取拍照文件错误："+e.message );
		} );
	}, function ( e ) {
		outLine( "失败："+e.message );
	}, {filename:"_doc/camera/",index:1} );
}
// 录像
function getVideo() {
	outSet( "开始录像：" );
	var cmr = plus.camera.getCamera();
	cmr.startVideoCapture( function ( p ) {
		outLine( "成功："+p );
		plus.io.resolveLocalFileSystemURL( p, function( entry) {
			createItem( entry );
		}, function( e ) {
			outLine( "读取录像文件错误："+e.message );
		} );
	}, function( e ){
		outLine( "失败："+e.message );
	}, {filename:"_doc/camera/",index:i} );
}
// 显示文件
function displayFile( li ) {
	if ( w ) {
		outLine( "重复点击！" );
		return;
	}
	if ( !li || !li.entry ) {
		ouSet( "无效的媒体文件" );
		return;
	}
	var name = li.entry.name;
	var suffix = name.substr(name.lastIndexOf('.'));
	var url = "";
	if ( suffix==".mov" || suffix==".3gp" || suffix==".mp4" || suffix==".avi" ){
		//if(unv){plus.runtime.openFile("_doc/camera/"+name);return;}
		url = "/plus/camera_video.html";
	} else {
		url = "/plus/camera_image.html";
	}
	w=plus.webview.create(url,url,{scrollIndicator:'none',scalable:true,bounce:"all"});
	w.addEventListener( "loaded", function(){
		w.evalJS( "loadMedia('"+li.entry.toLocalURL()+"')" );
		//w.evalJS( "loadMedia(\""+"http://localhost:13131/_doc/camera/"+name+"\")" );
	}, false );
	w.addEventListener( "close", function() {
		w = null;
	}, false );
	w.show( "pop-in" );
}

// 添加播放项
function createItem( entry ) {
	var li = document.createElement("li");
	li.className = "ditem";
	li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
	li.setAttribute( "onclick", "displayFile(this);" );
	hl.insertBefore( li, le.nextSibling );
	li.querySelector(".aname").innerText = entry.name;
	li.querySelector(".ainf").innerText = "...";
	li.entry = entry;
	updateInformation( li );
	// 设置空项不可见
	le.style.display = "none";
}
// 获取录音文件信息
function updateInformation( li ) {
	if ( !li || !li.entry ) {
		return;
	}
	var entry = li.entry;
	entry.getMetadata( function ( metadata ) {
		li.querySelector( ".ainf" ).innerText = dateToStr( metadata.modificationTime );
	}, function ( e ) {
		outLine( "获取文件\""+entry.name+"\"信息失败："+e.message );
	} );
}
// 获取录音历史列表
function updateHistory() {
	if ( !gentry ) {
		return;
	}
  	var reader = gentry.createReader();
  	reader.readEntries( function ( entries ) {
  		for ( var i in entries ) {
  			if ( entries[i].isFile ) {
  				createItem( entries[i] );
  			}
  		}
  	}, function ( e ) {
  		outLine( "读取录音列表失败："+e.message );
  	} );
}
// 清除历史记录
function cleanHistory() {
	hl.innerHTML = '<li id="empty" class="ditem-empty">无历史记录</li>';
	le = document.getElementById( "empty" );
	// 删除音频文件
	outSet( "清空拍照录像历史记录：" );
	gentry.removeRecursively( function () {
		// Success
		outLine( "成功！" );
	}, function ( e ) {
		outLine( "失败："+e.message );
	});
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
.aname {
	font-size: 16px;
}
.ainf {
	font-size: 12px;
}
.iplay {
	display: block;
	background: no-repeat right center url();
	background-size: 50px 44px;
	-ms-touch-action: auto;
}
		</style>
	</head>
	<body>
		<header>
			<div class="nvbt iback" onclick="back(true);"></div>
			<div class="nvtt">Camera</div>
			<div class="nvbt idoc" onclick="openDoc('Camera Document','/doc/camera.html')"></div>
		</header>
		<div id="dcontent" class="dcontent">
			<!--<div class="button" onclick="changeIndex();">
				选择：<span id="display" style="color:#FF0000">主摄像头</span>
				<div style="width:0px;height:0px;overflow:hidden;"><select id="index">
					<option value='1' selected="true">主摄像头</option>
					<option value='2' >辅摄像头</option>
				</select></div>
			</div>-->
			<div class="button" onclick="getImage();">拍照</div>
			<div class="button" onclick="getVideo();">录像</div>
			<br/>
			<!-- History list -->
			<ul id="history" class="dlist" style="text-align:left;">
				<li id="empty" class="ditem-empty">无历史记录</li>
			</ul>
			<br/>
			<div class="button button-waring" onclick="cleanHistory();">清空历史记录</div>
			<br/>
		</div>
		<div id="output">
Camera管理摄像头设备，可用于拍摄照片、录制视频文件。
		</div>
	</body>
</html>